<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form action="aaaa">
        <!--
            accept: 控制文件域可以选择什么类型的文件
                accept=".jpg,.png,.gif"
                accept="image/jpeg,image/png,image/gif"
                accept="image/*"
            multiple: 允许选择多张图片
        -->
        <input type="file" id="file" accept="image/*" multiple>
    </form>
    <img src="" alt="">

    <script>

        // 获取文件域的dom对象
        var file = document.getElementById('file');
        file.onchange = function () {
            console.dir(file);

            var fileObj = file.files[0]; // 找到文件对象

            // 文件对象有两个用途
                // 1、可以追加到FormData中，提交给接口，实现文件上传
                // 2、可以为其生成一个url，用于图片预览
            
            // 为 文件对象生成 临时的url，这个url可以用于访问我们选择的图片
            var url = URL.createObjectURL(fileObj);
            console.log(url);
            document.querySelector('img').src = url;
        }
        
    </script>

</body>
</html>